<template>
	<view>
		<view class="zctab-bar-box">
			<!-- <tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar> -->
	
			<view class="title">个人目标：</view>
				<view class='target-wrap uni-flex '>
					<block v-for='(item,index) in targetList' :key="index">
						<view class="target-list zcFlex1 uni-flex zcAlignI_center"> 
							<view class='zcAlignI_center uni-flex zcJustifyC_center '><view :class="['iconfont', 'icon-'+item.icon]"></view></view>
							<view class='target-list-text'> 
								<view>{{item.numb?(item.numb+'万'):''}}</view>
								<view>{{item.name}}</view>
							</view>
						</view>
					</block>
				</view>
			<view class="title">个人达成率：</view>
			<view class='uni-flex achieve-wrap'>
				 <block v-for='(item2,index2 ) in opts' :key='index2'>
					<view class='uni-flex zcFlex_column zcAlignI_center achieve-list' > 
						<u-charts :canvasId="'achieveS'+index2" :chartType="item2.chartType" :opts="item2"></u-charts>
						<view class='qiun-text'>{{item2.series[0].name}}</view>
					</view>
				 </block>
			</view>
			<!-- 月目标 -->
			<view class="title">门店目标：</view>
				<view class='target-wrap uni-flex target-wrap-month'>
					<block v-for='(item,index) in targetListMonth' :key="index">
						<view class="target-list zcFlex1 uni-flex zcAlignI_center"> 
							<view class='zcAlignI_center uni-flex zcJustifyC_center '><view :class="['iconfont','iconfontFile'+item.icon, 'icon-'+item.icon]"></view></view>
							<view class='target-list-text'> 
								<view>{{item.numb?(item.numb+'万'):''}}</view>
								<view>{{item.name}}</view>
							</view>
						</view>
					</block>
				</view>
			<view class="title">门店达成率：</view>
			<view class='achieve-wrap uni-flex'>
				<block v-for='(item2,index2 ) in optsMonth' :key='index2'>
					<view class='uni-flex zcFlex_column zcAlignI_center achieve-list'> 
						<u-charts :canvasId="'achieve'+index2" :chartType="item2.chartType" :opts="item2"></u-charts>
						<view class='qiun-text'>{{item2.series[0].name}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "../../components/u-charts/u-charts.vue"
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	
	let _this;
	export default {
		components:{
			uCharts,
			tabBar
		},
		data() {
			return {
				year:'',
				month:'',
				tabBar:{
					tabIndex:0,
					tabBars:[
						{
							name:'个人目标达成率'
						},
						{
							name:'门店目标达成率'
						}
					]
				},
				optsMonth:[
					{	// 正式 整圆弧进度 参数配置
						chartType:'arcbar',
						series:[
							{
							name: '总保',	// 进度名称
							data: 0,		// 进度值
							color: '#27CAB6',	// 进度显示颜色
							text:0
							}
						]
					},
					{	chartType:'arcbar',series: [{name: '新保',	data: 0,color: '#27CAB6',text:0}]},
					{	chartType:'arcbar',series: [{name: '非车险卡单',	data: 0,color: '#27CAB6',text:0}]},
					{	chartType:'arcbar',series: [{name: '跟单率',	data: 0,color: '#27CAB6',text:0}]},
					{	chartType:'arcbar',series: [{name: '非车险渗透率',	data: 0,color: '#27CAB6',text:0}]}
				],
				opts:[
					{	// 正式 整圆弧进度 参数配置
						chartType:'arcbar',
						series:[
							{
								name: '总保',	// 进度名称
								data: 0,		// 进度值
								color: '#3CA4F9',	// 进度显示颜色
								text:0
							}
						]
					},
					{	chartType:'arcbar',series: [{name: '新保',	data: 0,color: '#3CA4F9',text:0}]},
					{	chartType:'arcbar',series: [{name: '非车险卡单',	data: 0,color: '#3CA4F9',text:0}]},
					{	chartType:'arcbar',series: [{name: '跟单率',	data: 0,color: '#3CA4F9',text:0}]},
					{	chartType:'arcbar',series: [{name: '非车险渗透率',data: 0,color: '#3CA4F9',text:0}]}
				],
				targetList:[  //目标数据
					{name:'总保费',icon:'jinbiyue',numb:""},
					{name:'新保费',icon:'qiandai',numb:""},
					{name:'非车险卡单',icon:'file',numb:""}
				],
				targetListMonth:[  //目标数据
					{name:'总保费',icon:'jinbiyue',numb:""},
					{name:'新保费',icon:'qiandai',numb:""},
					{name:'非车险卡单',icon:'file',numb:""}
				]
			}
		},
		onLoad() {
			_this = this;
			let date = new Date();
			date = date.toJSON().split('T')[0];
			_this.year = date.split('-')[0];
			_this.month = date.split('-')[1];
			
			_this.zcQuerySalesMan4TargetStatistic();
		},
		methods: {
			tapTab(e){
				this.tabBar.tabIndex=e
			},
			// 进度图标 进度值 、 显示文本值 转换方法
			getFloat(res,zcIs) {
				let values = '';
				let newVal = '';
				let index = 2;
				if (zcIs) {
					res = ''+(res/100);
					index = 4;
				}else{
					res = ''+res;
				}
				values = res.split('.');
				if (values.length>1 && values[1].length>index) {
					newVal = values[0]+'.'+values[1].substring(0,index);
				}else {
					newVal = values[0]+'.'+values[1];
				}
				return parseFloat(newVal);
			},
			zcQuerySalesMan4TargetStatistic() {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QuerySalesMan4TargetStatistic',
						Data: {
							Calendar_Year: _this.year,	
							Calendar_Month: _this.month	
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data!==null) {
								// 	个人目标率
								if (resjson.data.SalesMan != null) {
									_this.targetList[0].numb = ''+resjson.data.SalesMan.TotalInsure_Target;	//	总保费
									_this.targetList[1].numb = ''+resjson.data.SalesMan.TotalNew_Target;	//	新保费
									_this.targetList[2].numb = ''+resjson.data.SalesMan.TotalCard_Target;	//	非车险卡单费
									
									_this.getFloat(resjson.data.SalesMan.TotalCardRate_Rate);
									
									_this.opts[0].series[0].data = _this.getFloat(resjson.data.SalesMan.TotalInsure_Rate,true);	//	总保率
									_this.opts[1].series[0].data = _this.getFloat(resjson.data.SalesMan.TotalNew_Rate,true);	//	新保率
									_this.opts[2].series[0].data = _this.getFloat(resjson.data.SalesMan.TotalCard_Rate,true);	//	非车险卡单率
									_this.opts[3].series[0].data = _this.getFloat(resjson.data.SalesMan.TotalFollow_Rate,true);	//	跟单率
									_this.opts[4].series[0].data = _this.getFloat(resjson.data.SalesMan.TotalCardRate_Rate,true);	//	非车险渗透率
									//  下面是显示文本值
									_this.opts[0].series[0].text = _this.getFloat(resjson.data.SalesMan.TotalInsure_Rate,false);	//	总保率
									_this.opts[1].series[0].text = _this.getFloat(resjson.data.SalesMan.TotalNew_Rate,false);	//	新保率
									_this.opts[2].series[0].text = _this.getFloat(resjson.data.SalesMan.TotalCard_Rate,false);	//	非车险卡单率
									_this.opts[3].series[0].text = _this.getFloat(resjson.data.SalesMan.TotalFollow_Rate,false);	//	跟单率
									_this.opts[4].series[0].text = _this.getFloat(resjson.data.SalesMan.TotalCardRate_Rate,false);	//	非车险渗透率
									
								}
								// 	门店目标率
								if (resjson.data.Shop != null) {
									_this.targetListMonth[0].numb = ''+resjson.data.Shop.TotalInsure_Target;	//	总保费
									_this.targetListMonth[1].numb = ''+resjson.data.Shop.TotalNew_Target;	//	新保费
									_this.targetListMonth[2].numb = ''+resjson.data.Shop.TotalCard_Target;	//	非车险卡单费
									_this.optsMonth[0].series[0].data = _this.getFloat(resjson.data.Shop.TotalInsure_Rate,true);	//	总保率
									_this.optsMonth[1].series[0].data = _this.getFloat(resjson.data.Shop.TotalNew_Rate,true);	//	新保率
									_this.optsMonth[2].series[0].data = _this.getFloat(resjson.data.Shop.TotalCard_Rate,true);	//	非车险卡单率
									_this.optsMonth[3].series[0].data = _this.getFloat(resjson.data.Shop.TotalFollow_Rate,true);	//	跟单率
									_this.optsMonth[4].series[0].data = _this.getFloat(resjson.data.Shop.TotalCardRate_Rate,true);	//	非车险渗透率
									//  下面是显示文本值
									_this.optsMonth[0].series[0].text = _this.getFloat(resjson.data.Shop.TotalInsure_Rate,false);	//	总保率
									_this.optsMonth[1].series[0].text = _this.getFloat(resjson.data.Shop.TotalNew_Rate,false);	//	新保率
									_this.optsMonth[2].series[0].text = _this.getFloat(resjson.data.Shop.TotalCard_Rate,false);	//	非车险卡单率
									_this.optsMonth[3].series[0].text = _this.getFloat(resjson.data.Shop.TotalFollow_Rate,false);	//	跟单率
									_this.optsMonth[4].series[0].text = _this.getFloat(resjson.data.Shop.TotalCardRate_Rate,false);	//	非车险渗透率
								}
								
							}
						} else{
							
						}
						
					},
					Scope: this
				})
			}
		}
	}
</script>

<style>
	/* .zctab-bar-box{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	} */
	.uni-tab-bar{
		width: 100%;
		flex: 1;
		height: 100%;
		position: relative;
	}
	.zc-tab-bar{
		overflow: hidden;
		display: block;
		will-change:transform;
		transition: all 0.4S ease-in;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;}
	.swiper-tab-list{width: 50%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
	.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 35%;bottom: 0;border-radius: 3upx;}
	
	/* 图标样式 */
	/* .qiun-columns {
		width: 180upx;
		height: 180upx;
		background-color: #FFFFFF;
		position: relative;
	} */
	/* .charts1{position: relative!important;} */
	/* 2019-10-28 样式修改 */
	.title{
		height: 100upx;
		line-height: 100upx;
		padding-left: 25upx;
		width: 100%;
		box-sizing: border-box;
	}
	.target-wrap{
		width: 100%;
	}
	.target-list{
		margin-left: 15upx;
		background-color: #fff;
		padding:30upx 8upx;
		box-shadow: 1upx 1upx 5upx 2upx #DAECFB;
	}
		.target-list:last-child{
			margin-right: 15upx;
		}
		.target-list>view:first-child{
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			background-color:#E2F3E1;
			margin: 0 10upx;
		}
		.target-list>view:first-child>image{
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
		}
		.target-list-text>view:nth-of-type(2){
			color:#6C6C6C;
			font-size: 24upx !important;
		}
		.target-list-text>view{
			height: 35upx;
			line-height: 35upx;
		}
		.achieve-box{display: flex;width: 100%;border: 1upx solid red!important;position: relative;height: 100px;}
		.achieve-wrap{
			flex-wrap:wrap;
			background-color: #fff;
			padding: 10upx 0;
		}
		.achieve-wrap:last-child{margin-bottom: 40upx;}
		.achieve-list{
			/* padding-top: 20upx; */
			width:33.3%;
			text-align: center; 
		}
		.qiun-text{
			color:#333 !important;
			width: 100%;
			text-align: center;
			height: 50upx;
		}
		.target-list:nth-of-type(2)>view:first-child{
			background-color: #D9F7F9;
		}
			.target-list:nth-of-type(3)>view:first-child{
			background-color: #FEF6E1;
		}
			.target-wrap-month>.target-list:last-child>view:first-child{
			background-color: #E0D4FE !important;
		}
		.iconfont{
			font-size: 32upx;
		}
		.icon-qiandai:before {//钱袋
			color:#01C0D4
		}
		.icon-file:before { //文本
			color:#EDB935
		}
			.iconfontFilefile:before { //文本
			color:#9878E5 !important
		}
		.icon-jinbiyue:before { //金币$
			color:#4DCA4E
		}
</style>
